<template>
  <div class="inspection-form-A">
    <header>
      <a-icon type="left" id="left" @click="back" />
      <div id="title">Job Report - Part A</div>
      <a-icon
        type="link"
        id="link"
        :class="isOpacity == true ? 'opacity' : ''"
        @click="link"
      />
    </header>
    <nav>
      <div
        :class="
          $route.path == '/inspectionFormA' ? 'nav-item-active' : 'nav-item'
        "
      >
        <a-icon
          type="snippets"
          theme="filled"
          :class="$route.path == '/inspectionFormA' ? 'icon-active' : 'icon'"
          @click="formABtn"
        />
      </div>

      <div
        :class="
          $route.path == '/floorPlanPage' ? 'nav-item-active' : 'nav-item'
        "
      >
        <a-icon
          type="table"
          class="icon"
          :class="$route.path == '/floorPlanPage' ? 'icon-active' : 'icon'"
        />
      </div>

      <div
        :class="
          $route.path == '/inspectionFormB' ? 'nav-item-active' : 'nav-item'
        "
      >
        <a-icon
          type="snippets"
          theme="filled"
          :class="$route.path == '/inspectionFormB' ? 'icon-active' : 'icon'"
          @click="formBBtn"
        />
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      is_sup_tab_select: false, //sup tab是否被选择
      isOpacity: false, //是否透明
    };
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    formABtn() {
      this.$router.push("/inspectionFormA");
    },
    formBBtn() {
      // this.$router.push("/inspectionFormB");
    },
    back() {
      // this.$router.push("/inspectionFormA");
      this.$router.go(-1);
    },
    link() {
      if (this.isOpacity == false) {
        console.log("clicked");
        this.$router.push("/load");
      }else {
        console.log("Can not click");
      }
    },
  },
  watch: {
    $route(to, from) {
      if (to.path == "/inspectionFormB") {
        this.isOpacity = false;
      }
    },
  },
  mounted() {
    if (
      this.$route.path == "/inspectionFormA" ||
      this.$route.path == "/floorPlanPage"
    ) {
      this.isOpacity = true;
    }
  },
};
</script>
<style scoped>
.inspection-form-A {
  width: 100vw;
}
header {
  height: 0.36rem;
  display: flex;
  align-items: center;
  font-size: 0.1rem;
  font-weight: 600;
  color: #010101;
}
#title {
  flex: 6;
  text-align: center;
}
#left,
#link {
  flex: 1;
  width: 0.3rem;
}
nav {
  display: flex;
  justify-content: space-between;
}
.nav-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.04rem 0;
  border-bottom: solid 0.02rem #ffffff;
}
.nav-item-active {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.04rem 0;
  border-bottom: solid 0.02rem #002f6d;
}
.icon {
  font-size: 0.15rem;
}
.icon-active {
  font-size: 0.15rem;
  color: #022f70;
}
.opacity {
  opacity: 0.8;
}
</style>